<template>
	<uni-popup ref="popup" type="center" :isMaskClick="false">
		<view class="content">
			<view class="title"> 提示 </view>
			<view class="tips"> {{ tips }} </view>
			<view class="btn-box">
				<view class="btn" @tap="close"> 取消 </view>
				<view class="btn" @tap="confirm"> 确定 </view>
			</view>
		</view>
	</uni-popup>
</template>

<script setup>
	const emit = defineEmits(['confirm'])
	defineProps({
		tips: {
			type: String,
			default: '确定要接单吗？'
		}
	})
	import { ref } from 'vue';
	const popup = ref()
	const open = () => {
		popup.value.open()
	}
	const close = () => {
		popup.value.close()
	}
	const confirm = () => {
		emit('confirm')
	}
	defineExpose({
		open,
		close
	})
</script>

<style lang="scss" scoped>
	.content {
		width: 270px;
		padding-top: 20px;
		text-align: center;
		border-radius: 10px;
		background-color: #fff;
		.title {
			color: #333333;
			font-size: 17px;
			font-weight: 500;
			line-height: 24px;
		}
		.tips {
			color: #666666;
			font-size: 15px;
			margin-top: 4px;
			font-weight: 400;
			line-height: 21px;
			margin-bottom: 20px;
		}
		.btn-box {
			display: flex;
			border-top: 1px solid #eeeeee;
			.btn {
				flex: 1;
				height: 44px;
				color: #333333;
				font-size: 16px;
				font-weight: 400;
				line-height: 44px;
				&:nth-last-of-type(1) {
					color: #FF3B1E;
					font-weight: bold;
					border-left: 1px solid #eeeeee;
				}
			}
		}
	}
</style>